<!DOCTYPE html>
<html>
<head>
  <title>CSS Media Queries: tokenizing "and"</title>
  <link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/#syntax" />
  <style type="text/css">
    div {
      width: 150px;
      height: 50px;
      background-color: red;
    }
    #t1 { background-color: green; }
    @media all and(color) { #t1 { background-color: red; } }
    @media all and/**/(color) { #t2 { background-color: green; } }
    @media all and (color) { #t3 { background-color: green; } }
  </style>
</head>
<body>
  <p>You should see a green square below.</p>
  <div id="t1"></div>
  <div id="t2"></div>
  <div id="t3"></div>
</body>
</html>
